<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="学生姓名" prop="studentName">
          <el-input
            v-model="queryParams.studentName"
            placeholder="学生姓名"
            clearable
            size="small"
            style="width: 230px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="维修等级" prop="weixiuDengji">
          <el-select
            v-model="queryParams.weixiuDengji"
            placeholder="维修等级"
            clearable
            size="small"
            style="width: 180px">
            <el-option value="">请选择</el-option>
            <el-option label="加急" value="1"></el-option>
            <el-option label="紧急" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="处理状态"
            clearable
            size="small"
            style="width: 180px">
            <el-option>请选择</el-option>
            <el-option label="新维修" value="1"></el-option>
            <el-option label="维修中" value="2"></el-option>
            <el-option label="已修缮" value="3"></el-option>
            <el-option label="未修好" value="4"></el-option>
            <el-option label="已修好" value="5"></el-option>
            <el-option label="已撤销" value="6"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            v-has-permi="['iot:xs:add']"
            @click="handleAdd"
          >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="handleExport"
          >导出
          </el-button>
        </el-col>
      </el-row>
  
      <el-table v-loading="loading" :data="baoxiuList">
        <template slot-scope="scope">
          <el-table-column label="序号" align="center" type="index"/>
          <el-table-column label="学生姓名" width="150" align="center" prop="studentName"/>
          <el-table-column label="地址" width="100" align="center" prop="location" :show-overflow-tooltip="true"/>
          <el-table-column label="故障描述" width="100" align="center" prop="guzhangMsText" :show-overflow-tooltip="true">
          </el-table-column>
  
          <el-table-column label="故障照片" align="center" prop="guzhangPhotn" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="'http://localhost:8089/'+scope.row.guzhangPhotn"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="修缮" align="center" prop="weixiuMsPhotn" :show-overflow-tooltip="true">
            <template slot-scope="scope" v-if="scope.row.weixiuMsPhotn!=null">
              <el-image
                style="width: 100px; height: 100px"
                :src="'http://localhost:8089/'+scope.row.weixiuMsPhotn"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="处理状态" width="100" align="center" prop="status" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 1">新维修</el-tag>
              <el-tag type="success" v-if="scope.row.status == 2">维修中</el-tag>
              <el-tag type="info" v-if="scope.row.status == 3">已修缮</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 4">未修好</el-tag>
              <el-tag type="danger" v-if="scope.row.status == 5">已修好</el-tag>
              <el-tag type="danger" v-if="scope.row.status == 6">已撤销</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="申请时间" align="center" prop="senqingDate">
            <template slot-scope="scope">
              {{ parseTime(scope.row.senqingDate,'{y}-{m}-{d} {h}:{s}:{m}') }}
            </template>
          </el-table-column>
          <el-table-column label="维修等级" align="center" prop="weixiuDengji">
            <template slot-scope="scope">
              <el-tag type="info" v-if="scope.row.weixiuDengji==0">普通</el-tag>
              <el-tag type="warning" v-if="scope.row.weixiuDengji==1">加急</el-tag>
              <el-tag type="danger" v-if="scope.row.weixiuDengji==2">紧急</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="180">
            <template slot-scope="scope">
              <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-zoom-in" @click.native="handleUpdate(scope.row.id)"
                                    v-has-permi="['iot:baoxiu:query']">查看报修信息
                  </el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus" v-if="scope.row.status==2 || scope.row.status==4"
                                    v-has-permi="['iot:wxg:submit']" @click.native="toSubmit(scope.row.id)">提交任务
                  </el-dropdown-item>
                  <el-dropdown-item icon="el-icon-circle-plus-outline" v-if="scope.row.status==3"
                                    v-has-permi="['iot:xs:right']" @click.native="toRight(scope.row.id,4)">未修好
                  </el-dropdown-item>
                  <el-dropdown-item icon="el-icon-check" v-if="scope.row.status==3"  v-has-permi="['iot:xs:right']"
                                    @click.native="toRight(scope.row.id,5)">已修好
                  </el-dropdown-item>
                  <!--              <el-dropdown-item icon="el-icon-circle-check" command="e">蚵仔煎</el-dropdown-item>-->
                  <el-dropdown-item icon="el-icon-delete" v-if="scope.row.status==1" v-has-permi="['iot:xs:delete']"
                                    @click.native="del(scope.row.id)">撤销
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </template>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
      <!-- 添加或修改参数配置对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="学生名称" prop="studentName">
                <el-input v-model="form.studentName" placeholder="请输入学生名称" v-bind:disabled="form.id!=''"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="报修类型">
                <el-select v-model="form.baoxiuTypeId" clearable filterable placeholder="报修类型"
                           v-bind:disabled="form.id!=''">
                  <el-option
                    v-for="item in baoXiuTypeList"
                    :key="item.baoxiuTypeId"
                    :label="item.typeName"
                    :value="item.baoxiuTypeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.id==''">
              <el-form-item label="故障照片">
                <el-upload :ref="upload"
                           class="avatar-uploader"
                           :auto-upload="false"
                           :action="upload.url"
                           :multiple="false"
                           :show-file-list="false"
                           :on-change="handleChange">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-input type="hidden" v-model="form.faceSelfDir"/>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-else>
              <el-image
                style="width: 350px; height: 250px;margin-left: 80px"
                :src="imageUrl"
              ></el-image>
            </el-col>
            <el-col :span="24">
              <el-form-item label="故障描述" prop="guzhangMsText">
                <el-input v-model="form.guzhangMsText" placeholder="请描述故障情况" v-bind:disabled="form.id!=''"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="楼栋名称" prop="buildingId">
                <el-select @change="buildingChange" v-model="form.buildingId" v-bind:disabled="form.id!=''" clearable
                           filterable placeholder="请选择">
                  <el-option
                    v-for="item in buidingList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="楼层名称" prop="floorId">
                <el-select @change="floorChange" v-model="form.floorId" clearable filterable placeholder="请选择"
                           v-bind:disabled="form.id!=''">
                  <el-option
                    v-for="item in floorList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="房间名称" prop="roomId">
                <el-select @change="roomChange" v-model="form.roomId" v-bind:disabled="form.id!=''" clearable filterable
                           placeholder="请选择">
                  <el-option
                    v-for="item in roomList"
                    :key="item.id"
                    :label="item.name"
                    :value="String(item.id)">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm" v-if="form.id==''">确 定</el-button>
          <el-button type="primary" @click="jieShou" v-has-permi="['iot:wxg:jieshou']" v-else-if="form.status==1">接受任务
          </el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
  
  
      <!-- 提交任务 -->
      <el-dialog :title="title2" :visible.sync="open2" width="500px">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-col :span="24">
            <el-form-item label="修缮照片">
              <el-upload :ref="upload"
                         class="avatar-uploader"
                         :auto-upload="false"
                         :action="upload.url"
                         :multiple="false"
                         :show-file-list="false"
                         :on-change="handleChange">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-input type="hidden" v-model="form.faceSelfDir"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="修缮描述" prop="weixiuMsText">
              <el-input v-model="form.weixiuMsText" placeholder="请描述修缮情况"/>
            </el-form-item>
          </el-col>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="tijiaoRenwu">提交任务</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
  
      <!-- 提交任务 -->
      <el-dialog :title="title3" :visible.sync="open3" width="500px">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <div v-if="title3=='再次申请维修'">
            <el-col :span="24">
              <el-form-item label="故障照片">
                <el-upload :ref="upload"
                           class="avatar-uploader"
                           :auto-upload="false"
                           :action="upload.url"
                           :multiple="false"
                           :show-file-list="false"
                           :on-change="handleChange">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-input type="hidden" v-model="form.faceSelfDir"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="学生反馈" prop="fankuiText">
                <el-input v-model="form.fankuiText" placeholder="请描述反馈信息"/>
              </el-form-item>
            </el-col>
          </div>
          <div v-else>
            <el-col :span="24">
              <el-form-item label="评分星级" prop="pingfen">
                <el-radio v-model="form.pingfen" label="1">一星</el-radio>
                <el-radio v-model="form.pingfen" label="2">两星</el-radio>
                <el-radio v-model="form.pingfen" label="3">三星</el-radio>
                <el-radio v-model="form.pingfen" label="4">四星</el-radio>
                <el-radio v-model="form.pingfen" label="5">五星</el-radio>
              </el-form-item>
            </el-col>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="Right()">提交</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
  
    </div>
  
  </template>
  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
  
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
  
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
  
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  
  
    /**
    * 照像机
    */
    * {
      padding: 0;
      margin: 0;
    }
  
    .btn {
      width: 100px;
      padding: 10px 0;
      border-radius: 4px;
      background: #ff5415;
      text-align: center;
      color: #fff;
      cursor: pointer;
      border: none;
      font-size: 16px;
    }
  
    video,
    canvas {
      width: 200px;
      height: 200px;
      border: 1px solid #ff5415;
      border-radius: 4px;
      margin-left: 5px;
    }
  
    .camera-warpper {
      padding: 20px 0;
      width: 100%;
    }
  
    .video-container {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .btns {
      padding: 20px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    button + button {
      margin-left: 10px;
    }
  
  </style>
  
  <script>
    import {getToken} from '@/utils/auth'
    import {list, getById, getBaoXiuTypeList, add, delById, jieshou, submit, right, exportTable} from '@/api/repair/apartmentRepair'
  
    export default {
      name: "xsbaoxiu",
      data() {
        return {
          baoXiuTypeList: [],
          upload: {
            headers: {Authorization: "Bearer " + getToken()},
            url: process.env.VUE_APP_BASE_API + "/file/uploadImage",
            baseUri: process.env.VUE_APP_BASE_API
          },
          // 遮罩层
          loading: false,
          config: {
            // video属性设置
            video: {
              width: 200,
              height: 200
            },
            // audio属性设置
            audio: true
          },
          video: undefined,
          canvas: undefined,
          mediaStream: undefined,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 总条数
          total: 0,
          // 用户表格数据
          baoxiuList: [],
          // 弹出层标题
          title: "",
          title2: "",
          title3: "",
          // 是否显示弹出层
          open: false,
          open2: false,
          open3: false,
          // 是否弹出新增层。
          openAdd: false,
          // 部门名称
          deptName: undefined,
          // 默认密码
          initPassword: undefined,
          // 日期范围
          dateRange: [],
          // 状态数据字典
          statusOptions: [],
          // 表单参数
          form: {
            id: '',
            studentName: '',
            baoxiuTypeId: '',
            guzhangMsText: '',
            Img: '',
            buildingId: '',
            floorId: '',
            roomId: '',
            weixiuMsText: '',
            fankuiText: '',
            pingfen: ''
          },
          form2: {
            weixiuMsText: ''
          },
          buildingList: [],
          floorList: [],
          roomList: [],
          imageUrl: '',
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            studentName: '',
            weixiuDengji: '',
            status: ''
          },
          // 表单校验
          rules: {
            buildingId: [
              {required: true, message: "请选择楼栋", trigger: "blur"}
            ],
            floorId: [
              {required: true, message: "请选择楼层", trigger: "blur"}
            ],
            roomId: [
              {required: true, message: "请选择房间", trigger: "blur"}
            ]
          }
        };
      },
      created() {
        this.getList();
        getBaoXiuTypeList().then(result => {
          console.log(result)
          this.baoXiuTypeList = result.data
        })
      },
      methods: {
        /** 查询人脸闸机设备列表 */
        getList() {
          this.loading = true;
          list(this.queryParams).then(result => {
            this.baoxiuList = result.data.list;
            this.total = result.data.total;
            this.loading = false;
          })
        },
     
        handleChange(file, fileList) {
          console.log('upload url', this.upload.url)
          const isJPG = (file.raw.type === 'image/jpeg');
          const isLt2M = file.raw.size / 1024 / 1024 < 2;
          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            return false;
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 100K!');
            return false;
          }
          this.imageUrl = URL.createObjectURL(file.raw);
          this.form.Img = file.raw
          fileList = []
          return isJPG && isLt2M;
        },
        // 取消按钮
        cancel() {
          this.open = false;
          this.open2 = false;
          this.open3 = false;
          this.reset();
          this.imageUrl = "";
        },
        // 表单重置
        reset() {
          this.form = {
            id: '',
            studentName: '',
            baoxiuTypeId: '',
            guzhangMsText: '',
            Img: '',
            buildingId: '',
            floorId: '',
            roomId: '',
            weixiuMsText: '',
            fankuiText: '',
            pingfen: ''
          }
          this.floorList = []
          this.roomList = []
          this.imageUrl = "";
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.page = 1;
          this.getList();
          this.imageUrl = "";
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.dateRange = [];
          this.resetForm("queryForm");
          this.handleQuery();
        },
        /** 新增按钮操作 */
        handleAdd() {
          this.reset()
  
          this.open = true;
          this.title = "添加报修信息";
        },
        /** 修改按钮操作 */
        handleUpdate(id) {
  
          getById(id).then(response => {
            console.log(response)
            this.form.id = response.data.id
            this.form.baoxiuTypeId = response.data.baoxiuTypeId
            this.form.studentName = response.data.studentName
            this.form.typeName = response.data.typeName
            this.form.guzhangMsText = response.data.guzhangMsText
            this.form.location = response.data.location
            this.form.status = response.data.status
            this.imageUrl = process.env.VUE_APP_BASE_API + response.data.guzhangPhotn
            this.open = true;
            this.title = "故障详情";
          });
        },
        expandProcess(treeList, id) {
          let itemNode = treeList.filter(item => item.id == this.form.bsloId);
          if (itemNode.length != 0) {
            return true;
          } else {
            let isExp = false;
            for (let i = 0, size = treeList == null || treeList == undefined ? 0 : treeList.length; i < size; i++) {
              isExp = this.expandProcess(treeList[i].children, id);
              treeList[i].isDefaultExpanded = isExp;
              if (isExp) {
                break;
              }
            }
            return isExp;
          }
        },
        /** 提交按钮 */
        submitForm: function () {
          this.$refs["form"].validate(valid => {
            if (valid) {
                add(this.form).then(response => {
                  if (response.code == 200) {
                    this.msgSuccess("新增成功");
                    this.open = false;
                    this.getList();
                  } else {
                    this.msgError(response.message);
                  }
                });
            }
          });
        },
        /** 删除按钮操作 */
        del(id) {
          this.$confirm('确认撤销吗？', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function () {
            return delById(id);
          }).then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          }).catch(function () {
          });
        },
        /** 导出按钮操作 */
        handleExport() {
          const queryParams = this.queryParams;
          this.$confirm('是否确认导出所有用户数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function () {
            return exportUser(queryParams);
          }).then(response => {
            this.fileDownload(response.data, "用户管理.xlsx");
          }).catch(function () {
          });
        },
        jieShou() {
          var that = this
          jieshou(this.form.id).then(result => {
            console.log(result)
            if (result.code == 200) {
              this.msgSuccess(result.message);
              that.open = false
              that.getList()
            }
          })
        },
        toSubmit(id) {
          this.reset()
          this.form.id = id
          this.open2 = true;
          this.title2 = "提交任务"
        },
        tijiaoRenwu() {
          submit({id: this.form.id, weixiuMsText: this.form.weixiuMsText, Img: this.form.Img}).then(result => {
            if (result.code == 200) {
              this.msgSuccess("任务提交成功！")
              this.open2 = false;
              this.getList()
            }
          })
        },
        toRight(id, status) {
          this.reset()
          this.form.id = id
          this.open3 = true;
          if (status == 4) {
            this.title3 = "再次申请维修"
          } else {
            this.title3 = "维修评分"
          }
        },
        Right() {
          var data = {
            id: this.form.id,
            fankuiText: '',
            Img: '',
            status: '',
            pingfen: ''
          }
          if (this.title3 == "再次申请维修") {
            data.status = 4
            data.fankuiText = this.form.fankuiText
            data.Img = this.form.Img
          } else {
            data.status = 5
            data.pingfen = this.form.pingfen
          }
          right(data).then(result => {
            if (result.code == 200) {
              this.msgSuccess("操作成功")
              this.open3 = false;
              this.getList()
            }
          })
        },
        handleExport() {
          var that=this
          this.$confirm('是否确认导出所有用户数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function () {
            return exportTable(that.queryParams);
          }).then(response => {
            this.fileDownload(response.data, "学生报修.xlsx");
          }).catch(function () {
          });
        }
      }
    };
  
  </script>
  <style>
    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }
  
    .el-icon-arrow-down {
      font-size: 12px;
    }
  
    .demonstration {
      display: block;
      color: #8492a6;
      font-size: 14px;
      margin-bottom: 20px;
    }
  </style>
  